<template>
  <!-- 相当于html -->
  <div id="app">
    <!-- 使用组件 -->
    <!-- <buttonCounter></buttonCounter>
    <buttonCounter />
    <button-counter></button-counter>
    <button-counter />
    <button>
      提交
    </button> -->
    <!-- 
      父组件通过子组件的标签自定义属性
      进行值的传递，也就是将父组件
      data里面的数据展示在子组件当中;
     -->
    <!-- <sunCom :title="nickName"/> -->
    <!-- <sunComponent 
      :title="nickName"
      school="商丘职业技术学院"
      />
      <sunComponent 
      :title="nickName"
      school="商丘职业技术学院"
      come-from="日本"
      />
      <sunComponent 
      :title="nickName"
      :school="'789'"
      come-from="南阳"
      is-sex
      /> -->
      <!-- 直接使用属性名
          is-sex
        等价于
          :is-sex="true"
      -->
      <!-- <sunComponent 
      :title="nickName"
      age="19"
      school="商丘职业技术学院"
      comeFrom="驻马店"
      :is-sex="true"
      /> -->
      <!-- <todoList /> -->
      <!-- 
        组件名
          @自定义事件="当前组件methods里面的事件"
          事件写法:
            事件名,
            事件名()
          事件用法:
            事件名
            methods:{
              事件名(e){
                e 子组件传递来的 参数值
              }
            }
            事件名()
            methods :{
              事件名(e){
                e 是 undefined
              }
            }
       -->
      <!-- <comSun
       :title="nickName"
       @change="changeName"/> -->
       <!-- 
        指令v-bind
        和 v-on 
        -->
       <!-- <componentSun v-model="nickName" /> -->
       <!-- <button @click="test()">
        检测
       </button> -->
       <todoList></todoList>
  </div>
</template>

<script>
// js代码

// 导入 组件
import buttonCounter from '@/components/vue组件/1.vue注册方式.vue'
// 导入子组件
import sunCom from '@/components/vue组件/2.父组件向子组件传值.vue'
// 导入子组件
import sunComponent from '@/components/vue组件/3.父组件向子组件传值的类型规定.vue'
// 导入todolist组件
import todoList from '@/components/homework/todoList.vue'
// 导入子组件
import comSun from '@/components/vue组件/4.子组件向父组件响应事件.vue'
// 导入子组件
import componentSun from '@/components/vue组件/5.自定义事件上的v-model.vue'
// 导出vue实例
export default {
  data() {
    return {
      nickName: '小花'
    }
  },
  methods: {
    changeName(e){
      // console.log(e);
      // 通过 父组件的nickName 修改子组件的props
      this.nickName = e
    },
    test(){
      console.log(this.nickName);
    }
  },
  // 注册组件
  components: {
    // 名字： 值
    buttonCounter,
    sunCom,
    sunComponent,
    todoList,
    comSun,
    componentSun
    // 相当于: 
    // buttonCounter: buttonCounter
  }
}
</script>

<style lang="scss">
// 根组件当中写 所有组件的公共样式
// scoped 组件样式私有化
// 当前组件样式  
//   每一个vue文件都是一个组件
//  每一个文件都可以被引入
// button{
//   color: red;
// }
    *{
        margin: 0;
    }
</style>
